<template lang="html">
  <div class="home">

    <!-- <div class='clearfix'>
      <el-button type="danger" class='pull-right mb10' icon="el-icon-delete" style='margin-right:10px;' @click="tourl('/content/trash')">回收箱</el-button>
    </div> -->

    <div class='searchView'>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="状态">
          <el-select placeholder="请选择状态" v-model='status'>
            <el-option :label="i.label" :value="i.value" v-for='(i,index) in options' :key='index'></el-option>
          </el-select>
        </el-form-item>


        
        <el-form-item>
          <el-button type="primary" @click="getList(1)">查询</el-button>
        </el-form-item>

        <el-form-item class='pull-right'>
          <el-button type="primary" @click="create">创建动态</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class='tableView'>
      <el-tag type="info" class='mb10'>共{{totalData}}条记录</el-tag>
      <el-table
        ref="multipleTable"
        :data="tableData"
        v-loading='loading'
        align='center'
        border
        height='500'
        tooltip-effect="dark">

        <el-table-column
          type="index"
          align='center'
          width="50">
        </el-table-column>

        <el-table-column
        align='center'
        prop='content'
        label="动态标题">
        </el-table-column>

        <el-table-column
        align='center'
        prop='createTime'
        label="创建时间">
        </el-table-column>

        <el-table-column
        align='center'
        label="动态类型">
          <template slot-scope="scope">
            <span v-if='scope.row.type == 1'>图文</span>
            <span v-else-if='scope.row.type == 2'>视频</span>
          </template>
        </el-table-column>

        <el-table-column
        align='center'
        label="发布角色">
          <template slot-scope="scope">
            <span v-text='scope.row.user && scope.row.user.nickName || "-"'></span>
          </template>
        </el-table-column>

        <el-table-column
        align='center'
        label="状态">
          <template slot-scope="scope">
            <el-tag v-if='scope.row.status == 1' type="success">已发布</el-tag>
            <el-tag v-if='scope.row.status == 2' type="info">未发布</el-tag>
            <el-tag v-if='scope.row.status == 3' type="info">审核中</el-tag>
            <el-tag v-if='scope.row.status == 4' type="danger">未通过</el-tag>
          </template>
        </el-table-column>

        <el-table-column
        align='center'
        prop='updateTime'
        label="发布时间">
        </el-table-column>

        <el-table-column
        align='center'
        prop='commentCount'
        label="评论">
        </el-table-column>

        <el-table-column
        align='center'
        prop='likeCount'
        label="点赞">
        </el-table-column>

<!--         <el-table-column
        align='center'
        width="100"
        label="是否置顶">
          <template slot-scope="scope">
            <el-tag type="success">是</el-tag>
            <el-tag type="danger">否</el-tag>
          </template>
        </el-table-column> -->

        <el-table-column
        label=""
        width='220'
        align='center'>
          <template slot-scope="scope">
            <!-- <el-button size='mini' type="primary" @click="tourl('/content/dyinfo/'+scope.row.id,{userId:scope.row.userId})">回复</el-button> -->
            <el-button size='mini' type="primary" @click="tourl('/content/user/create/'+scope.row.id,{userId:scope.row.userId})">编辑</el-button>
            <el-button size='mini' type="danger" @click='delIt(scope.row.userId,scope.row.id)'>删除</el-button>
          </template>
        </el-table-column>

<!--         <el-table-column
        label=""
        width='140'
        align='center'>
          <template slot-scope="scope">
            <div class="sortBox">
              <i class="up fa fa-sort-up pull-left"></i>
              <i class="down fa fa-sort-down pull-left"></i>
            </div>
            <el-button size='mini' type="primary">置顶</el-button>
          </template>
        </el-table-column> -->
      </el-table>

      <div class="pageBlock">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, jumper, sizes"
          :total="totalData">
        </el-pagination>
      </div>
    </div>

  </div>
</template>
<script>
export default {

  data () {
    return {
      tableData:[],
      loading:false,
      status:'',
      options: [
        {
          value: '',
          label: '全部'
        },
        {
          value:'UN_PUBLISHED',
          label:'未发布'
        },
        {
          value:'PUBLISHED',
          label:'已通过'
        },
        {
          value:'AUDITING',
          label:'审核中'
        },
        {
          value:'NOT_PASS',
          label:'未通过'
        }
      ],
      totalData:0,
      pageSize:10,
      searchUserId:null,
      currentPage:1
    }
  },
  methods:{
    delIt(userId,id){
      this.$confirm('删除后可在“回收箱”中找回，是否确定删除？',{center:true})
      .then(res =>{

        this.loading = true;
        tools.ajax({
            url:`/dynamic_service/v1/users/${userId}/dynamic/squares/${id}`,
            data:{
              del:true
            },
            type:'PUT'
        })
        .then(res => {
          this.loading = false;
          if(res.code == 200){
            tools.toastOk('删除成功');
            this.getList(1);
          }
        })
        .catch(e => {
          this.loading = false;
        })

      }).catch( e=> {})
    },
    create(){
      if(!this.searchUserId){
        tools.toastWarn('请选择用户');
        return
      };

      this.tourl('/content/user/create',{userId:this.searchUserId});
    },
    getUserId(res){
      console.log(res);
      this.searchUserId = res;
      this.getList(1);
    },
  	tourl(url,query){
      tools.router.push({path:url,query:query || {}})
    },
    getList(page){
      if(page){
        this.currentPage = page;
      }

      if(!this.searchUserId){
        tools.toastWarn('请选择用户');
        return
      }

      this.loading = true;
      tools.ajax({
        url:`/dynamic_service/v1/users/${this.searchUserId}/dynamic/squares/list`,
        data:{
          page:this.currentPage,
          pageSize:this.pageSize,
          status:this.status,
          del:false,
          category:'DYNAMIC',//平台
        },
        type:'GET'
      })
      .then(res => {
        this.loading = false;
        if(res.code == 200){
          this.tableData = res.data.rows;
          this.totalData = +res.data.total;
        }
      })
      .catch(e => {
        this.loading = false;
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getList();
    }
  },
  mounted(){
    var _this = this;
    // this.getList();
  },
  components:{
  }
}
</script>

<style scoped lang='scss'>
  @import '../../assets/scss/tool.scss';
  .home{
    .sortBox{
      width: 50px;
      // height: 50px;
      // margin: 0 auto;
      position: relative;
      text-align: center;
      padding-top: 8px;
      .up,.down{
        @include hand;
        font-size: 25px;
        color: #DADADA;
        // display: block;
        // height: 10px;
        transition: color .3s ease;

        &:hover{
          color: #000;
        }
      }

      .down{
        position: relative;
        top: -10px;
      }
    }
  }
</style>